<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信支付</title>


    <link rel="stylesheet" type="text/css" href="/css/all.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-weixinpay.css" />

    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/qrcode.min.js"></script>
    <script src="/js/util.js"></script>
    <script src="/js/stomp.min.js"></script>
</head>
<body>
<div id="app">
    <!--主内容-->
    <div class="checkout py-container  pay">
        <div class="checkout-tit">
            <h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span></h4>
            <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{(money/100).toFixed(2)}}</em>元</span>
            <div class="clearfix"></div>
        </div>
        <div class="checkout-steps">
            <div class="fl weixin">微信支付</div>
            <div class="fl sao">
                <p class="red">如果二维码已过期，刷新页面重新获取二维码。</p>
                <div class="fl code">
                    <div id="qrcode"></div>
                    <div class="saosao">
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                </div>
                <div class="fl phone">

                </div>

            </div>
            <div class="clearfix"></div>
            <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
        </div>
    </div>

</div>
</body>

<script>

    new Vue({
        el:'#app',
        data(){
            return {
                orderId:'',
                money:""
            }
        },
        created(){
            this.createNative();
        },
        methods:{
            createNative(){
                // let orderId = getQueryString("orderId");
                //订单号，输入订单号
                let orderId = "77200001";
                axios.get(`/wxpay/createNative.do?orderId=${orderId}`).then( response=>{
                    if( response.data.out_trade_no!=null ){
                        //生成二维码
                        let qrcode = new QRCode(document.getElementById("qrcode"), {
                            width : 200,
                            height : 200
                        });
                        qrcode.makeCode(response.data.code_url);
                        this.orderId=response.data.out_trade_no;
                        this.money= response.data.total_fee ;
                        money= response.data.total_fee;
                        orderId=response.data.out_trade_no;
                    }else{
                        location.href='payfail.html';//跳转到错误页
                    }
                });
            }
        }
    });

    let money=0;
    let orderId="";
    let client = Stomp.client('ws://localhost:15674/ws');
    let on_connect = function(x) {
        //验证结果
        id = client.subscribe("/exchange/paynotify", function(d) {
            // if(d.body== getQueryString("orderId")){
                if( d.body === orderId ){
                location.href="paysuccess.html?money="+money;
            }
        });
    };
    let on_error =  function() {
        console.log('error');
    };
    client.connect('webguest', 'itcast', on_connect, on_error, '/');

</script>
</html>